<script lang="ts" setup name="XtxCheckbox">
const { modelValue } = defineProps<{
    modelValue: boolean
}>()
const emit = defineEmits<{
    (event: 'update:modelValue', value: boolean): void
}>()
const hClick = () => {
    emit('update:modelValue', !modelValue)
}
</script>

<template>
    <div class="xtx-checkbox">
        <i v-if="modelValue" @click="hClick" class="iconfont icon-checked"></i>
        <i v-else @click="hClick" class="iconfont icon-unchecked"></i>
        <span>
            <slot></slot>
        </span>
    </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
    display: inline-block;
    margin-right: 2px;

    .icon-checked {
        color: @xtxColor;

        ~span {
            color: @xtxColor;
        }
    }

    i {
        position: relative;
        top: 1px;
    }

    span {
        margin-left: 2px;
    }
}
</style>